
/* Custom page header */
.header {
    position: relative;
    z-index: 100;

    .top-bar {
        $text-color:$c-primary;
        background: #fff;
        border-radius: 0;
        border:none;
        margin: 0;
        .navbar-header {
            .navbar-toggle{
                .icon-bar{
                    background: $text-color;
                }
            }
            
        }
        .top-info{
            padding: 10px 0;
            
            .search{
                float: right;
                margin-top: 10px;
                position: relative;
                a.s-btn{
                    color: $c-primary;
                    @include right-middle(10px);
                }
                input{
                    width: 200px;
                    padding-right: 30px;
                }
            }
        }
        .navbar-collapse{
            .navbar-nav{
                >li{
                    float: none;
                    >a{
                        text-align: center;
                        color: $text-color;
                        text-transform: uppercase;
                        @include transition(.3s);
                        &:hover{
                            color: lighten($c-primary,10%);
                        }
                    }
                    .sub-nav{
                        display: none;
                        background: fade-out(#fff, .1);
                        li{
                            a{
                               display: block;
                               color: #999;
                               display: block;
                               padding: 10px;
                               text-align: center; 
                               &:hover{
                                    background-color: #F7F7F7;
                                    color: $c-primary;
                               }
                            }
                        }
                    }
                    &:hover{
                        .sub-nav{
                             display: block;
                             animation: scaleYdown .3s both;
                        }
                    }
                    
                }
            }
        }
    }
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width:768px) {



    /* Space out the masthead */
    .header {
        // margin: 10px 0;
        .navbar-brand {
            padding: 10px;
            img{
                max-height: 30px;
            }
        }
        .navbar-collapse{
            border-top: 3px solid $c-primary;
            border-bottom: 1px solid $c-primary;
            .navbar-nav{
                display: table;
                float: none;
                width: 100%;
                > li{
                    display: table-cell;
                    >a{
                        padding: 10px;
                        @include line-bottom($c-primary,0);
                        &:hover{
                            background: #fff;
                            @include line-bottom($c-primary,3px);
                        }
                    }
                    .sub-nav{
                        position: absolute;
                        top: 100%;
                        left: 0;
                        right: 0;
                    }
                }

                >li.active{
                    >a{
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:768px){
    .header{
        .top-bar{
            min-height: 44px;
            .top-info{
                padding: 0;
                .navbar-brand{
                    height: 44px;
                    padding: 6px 0;
                    img{
                        max-height: 24px;
                    }
                }
                
            }
            .navbar-toggle{
                margin: 4px 0;
            }
            .navbar-nav{
                margin: 0;
            }
        }
    }
}